<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css字体属性</title>
    <style>
        /* family字体 */
        h2 {
            font-family: '微软雅黑';
        }
        p {
            font-family: 'Times New Roman',Arial, Helvetica, sans-serif;
        }
        /* size大小 */
        body{
            font-size: 16px;
        }
        /* font-weight加粗 */
        .bold {
            font-weight: bold;
        }
        .bold2 {
            font-weight: 400;
        }
        /* font-style:italic斜体 */
        .italic {
            font-style: italic;
        }
        div {
            font-style: italic;
            font-weight: 700;
            font-size: 16px;
            font-family: Microsoft YaHei;
        }
        /* 字体的复合属性 */
        .div2 {
            font: font-style font-weight font-size/line-height font-family;
            font: italic 700 16px "Microsoft YaHei";
        }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色,</p>
    <p>优雅,淡然,又那么心中清澈.</p>
    <p>前端总是伴随着困难和犯错,</p>
    <p>静心,坦然,攻克一个又一个.</p>
    <p class="bold">拼死也要克服它,</p>
    <p class="bold2">这是pink的秘密也是老师最终的嘱托.</p>
    <p class="italic">这段文字是倾斜的</p>
    <div>这段文字倾斜 加粗 字号16像素 微软雅黑</div>
    <div class="div2">这段文字代码复合了</div>
</body>
</html>